<template>
  <ScrollWrapper>
    <div class="page-header">
      <p class="m-tip">*自评时未有领导审批 得分按自评得分算汇总。有领导审批之后 得分按领导审批得分算汇总.</p>
      <div class="header-actions">
        <div class="date-picker-group">
<!--          <CustomDatePicker v-model="start_at" @change="getList">-->
<!--            <template #default="{ date }">-->
<!--              <div class="date-picker-item">-->
<!--                <CalendarOutlined class="date-icon"/>-->
<!--                <span class="date-label"> {{ date ? formatDate(date) : "选择日期" }}</span>-->
<!--              </div>-->
<!--            </template>-->
<!--          </CustomDatePicker>-->
<!--          <CustomDatePicker v-model="end_at"  @change="getList">-->
<!--            <template #default="{ date }">-->
<!--              <div class="date-picker-item">-->
<!--                <CalendarOutlined class="date-icon"/>-->
<!--                <span class="date-label"> {{ date ? formatDate(date) : "选择日期" }}</span>-->
<!--              </div>-->
<!--            </template>-->
<!--          </CustomDatePicker>-->

        </div>
        <div class="add-button" @click="onAddEvaluation">
          <InsertRowAboveOutlined class="add-icon"/>
          <span>新增自评</span>
        </div>
      </div>
    </div>
    <div class="card-container-content">
      <div v-for="(item, index) in list"
           style="box-sizing: border-box;
           margin-top: 10px;">
        <div class="card">
          <div class="card-title">{{ item.title }}评</div>
          <div class="card-content">{{ item.content }}</div>
          <div class="card-actions">
            <div class="showDetail" @click="onShow(item.key)">
              <div style="margin-right: 10px;color:#777;font-weight: 500">绩效系数:{{item.coefficient}}</div>
              <div style="margin-right: 5px;font-size: 12px">{{ showDetail === item.key ? '收起' : "查看" }}</div>
              <UpOutlined v-if="showDetail ===item.key" style="font-size: 10px"/>
              <DownOutlined v-else style="font-size: 10px"/>
            </div>
          </div>
        </div>
        <EvaluatApproval v-if="item.key === showDetail" :isSelf="true" :userId="item.userID" :dataDate="item.dataDate"/>
      </div>
      <div v-if="showLoading">
        <a-skeleton active/>
      </div>
    </div>
  </ScrollWrapper>
</template>

<script>
import EvaluatApproval from "@/views/EvaluatApproval/index.vue";
import {InsertRowAboveOutlined, DownOutlined, UpOutlined, CalendarOutlined} from "@ant-design/icons-vue"
import help from "@/utils/help.js";
import api from "@/api/index.js";
import {useUserInfoStore} from "@/stores/userInfo.js";
import dayjs from "dayjs";
import CustomDatePicker from "@/components/CustomDatePicker/CustomDatePicker.vue";

export default {
  components: {
    InsertRowAboveOutlined,
    EvaluatApproval,
    CalendarOutlined,
    DownOutlined, UpOutlined,
    CustomDatePicker
  },
  data() {
    return {
      showDetail: null,
      showLoading: false,
      list: [],
      start_at: "",
      end_at: "",
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    formatDate(date) {
      return dayjs(date).format("YYYY-MM-DD");
    },
    async getList() {
      this.showLoading = true;
      try {
        let result = await api.getSalarySelfEvaluationList();
        let list = (result || []).map(item => {
          item.title = (dayjs(item.dataDate).month() + 1) + "月工作自评";
          //item.content = dayjs(item.dataDate).format("DD-MMM.-YYYY")
          item.content = item.position_level;
          item.key = item.userID + item.dataDate.toString();
          return item;
        })
        this.list = list;
      } catch (error) {
        help.showError(error);
      } finally {
        this.showLoading = false;
      }
    },
    onShow(key) {
      if (this.showDetail === key) {
        this.showDetail = ""
      } else {
        this.showDetail = key
      }
    },
    onButtonClick(key, edit) {
      if (edit) {
        this.$router.push("/payManage/evaluatEdit")
      } else {
        if (this.showDetail === key) {
          this.showDetail = null;
        } else {
          this.showDetail = key
        }
      }
    },
    onAddEvaluation() {
      // 新增自评按钮点击事件
      console.log('新增自评');
      // 这里可以添加跳转到新增自评页面的逻辑
      // this.$router.push("/selfAssessment/add");
    }
  }
}
</script>

<style scoped lang="scss">
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
  padding: 0 50px 0 0;
}

.m-tip {
  margin-top: 10px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
  flex: 1;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.date-picker-group {
  display: flex;
  gap: 8px;
}

.date-picker-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 13px;
  color: #3a8c3a;

  &:hover {
    border-color: #d9d9d9;
    background-color: #f0f0f0;
  }
}

.date-icon {
  font-size: 12px;
}

.date-label {
  font-size: 13px;
}

.add-button {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  color: #3a8c3a;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 13px;
  border: none;

  &:hover {
    opacity: 0.8;
  }
}

.add-icon {
  font-size: 12px;
}

.card {
  border-radius: 10px;
  padding: 16px 24px 16px 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
}

.card-title {
  font-size: 14px;
  font-weight: bold;
  width: 220px;
}

.card-content {
  color: #888;
  font-size: 12px;
}

.card-actions {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
}


.card-container-content {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  width: 100%;
  height: 100%;
  padding: 0px 40px 20px 0;
}

.showDetail {
  color: #3a8c3a;
  cursor: pointer;

  &:hover {
    opacity: 0.7;
  }

  display: flex;
  align-items: center;
}
</style>